<template>
    <div class="favorite">
        <div class="button-group">
            <button 
                class="favorite-button" 
                :class="{ 'active-button': selectedButton === 'Song' }" 
                @click="showComponent('Song')"
            >单曲</button>
            <button 
                class="favorite-button" 
                :class="{ 'active-button': selectedButton === 'Album' }" 
                @click="showComponent('Album')"
            >专辑</button>
            <button 
                class="favorite-button" 
                :class="{ 'active-button': selectedButton === 'Playlist' }" 
                @click="showComponent('Playlist')"
            >歌单</button>
            <button 
                class="favorite-button" 
                :class="{ 'active-button': selectedButton === 'Singer' }" 
                @click="showComponent('Singer')"
            >艺人</button>
        </div>
        <div class="love">
            <component :is="currentComponent" />
        </div>
    </div>
</template>

<script setup>
import { ref } from 'vue';
import Song from './Favorite/Song.vue';
import Album from './Favorite/Album.vue';
import Playlist from './Favorite/Playlist.vue';
import Singer from './Favorite/Singer.vue';

const currentComponent = ref(Song);

const selectedButton = ref('Song');

const showComponent = (type) => {
    selectedButton.value = type;
    switch (type) {
        case 'Song':
            currentComponent.value = Song;
            break;
        case 'Album':
            currentComponent.value = Album;
            break;
        case 'Playlist':
            currentComponent.value = Playlist;
            break;
        case 'Singer':
            currentComponent.value = Singer;
            break;
    }
};
</script>

<style>
.favorite {
    width: 900px;
    height: 465px;
    background: #000000;
    border: 1px solid #09ff00;
    color: #ffffff;
    padding: 0px;
    box-sizing: border-box;
    overflow: hidden;
}

.button-group {
    display: flex;
    gap: 10px;
    margin-bottom: 20px;
}

.favorite-button {
    padding: 4px 28px;
    background: #ffffff;
    color: #000000;
    border-radius: 16px;
    border: none;
    cursor: pointer;
    box-shadow: none;
}

.favorite-button:hover {
    background: #ff0000;
    color: #ffffff;
}

.active-button {
    background: #ff0000 !important;
    color: #ffffff !important;
}

.love {
    width: 900px;
    height: 410px;
    background: #ff0000;
    color: #ffffff;
    margin-top: 20px;
}
</style>